OpenEdge Development:<br />Progress Dynamics Web Development Guide TreeView commands and functions

TreeView commands and functions

You can use the JavaScript API to control the following client-side processing:

Clearing the current TreeView

You can clear data from the current TreeView with the following statement:


dyntree.clear(`parent_row_number`)

This command clears data from nodes below the parent node specified by parent_row_number. If parent_row_number is omitted, the entire TreeView is cleared.

Identifying TreeView data structure

Use the following statement to get information about the data structure of the current TreeView:


dyntree.`element`

The value of element can be any of the following:


JavaScript reference	Returns DOM reference to
TABLE.rows[`row_ number`].cells[0]	The TD node of the specified row of the HTML table for the TreeView.
struct[’`node_name`’]	An associative array of properties defined for the specified node.
currentopen	The TR element for the currently open node.
selected	The TR element for the currently selected node.
currentwdo	The value of `hdata` for the currently open source data object.

Capturing TreeView events

You can create a function, tvEvent, in your client-side JavaScript to capture TreeView events. Use the following syntax:


tvEvent(`event`)

For event, you must use one of the following:


Event	TreeView state
launch	Waiting for server to return container.
fetch	Waiting for server to return child nodes.
extract	Extract program node is selected.
empty	Node with no container is selected.
view	Data node is selected.
update	Data node is in update mode.
add	Data is being added.
modify	Data is being edited.

Example

The following example illustrates the use of some of the TreeView API calls:

// department.js - Filter viewer for Department treeview function filterButton(){ dyntree.clear(1); // Clear the nodes underneath the department node (0) // Setting the filter criteria document.form['_departmefullo._filter'].value= 'deptname > '+apph.logic.widgetValue('fifrom').split(',')[0] +'\| deptname < '+apph.logic.widgetValue('fito').split(',')[0]; apph.actions([ 'server.departmefullo.filter', // filter command 'server.wbo.0.department.dyntree', // treeview data fetch command 'wbo.submit']); // submit the request } // Capture treeview events function tvEvent(status){ window.main.status='tvEvent='+status; viewerMode(status!='modify' && status!='add'); } // Custom function to set state of viewer input fields var vmode=true; function viewerMode(mode){ if(vmode==mode) return; vmode=mode; var inputs=document.forms['_departmentfilterv']; for(var i=0;i<inputs.length;i++){ if(vmode){ inputs[i].removeAttribute('disabled'); } else { inputs[i].setAttribute('disabled','disabled'); } } }

// department.js - Filter viewer for Department treeview 
function filterButton(){ 
  dyntree.clear(1); // Clear the nodes underneath the department node (0) 
  // Setting the filter criteria 
  document.form['_departmefullo._filter'].value= 
      'deptname > '+apph.logic.widgetValue('fifrom').split(',')[0] 
   +'| deptname < '+apph.logic.widgetValue('fito').split(',')[0];       
  apph.actions([ 
    'server.departmefullo.filter',      // filter command 
    'server.wbo.0.department.dyntree',  // treeview data fetch command 
    'wbo.submit']);                     // submit the request 
} 
// Capture treeview events 
function tvEvent(status){ 
  window.main.status='tvEvent='+status; 
  viewerMode(status!='modify' && status!='add'); 
} 
// Custom function to set state of viewer input fields 
var vmode=true; 
function viewerMode(mode){ 
  if(vmode==mode) return; 
  vmode=mode; 
  var inputs=document.forms['_departmentfilterv']; 
  for(var i=0;i<inputs.length;i++){ 
    if(vmode){ 
      inputs[i].removeAttribute('disabled'); 
    } else { 
      inputs[i].setAttribute('disabled','disabled'); 
    } 
  } 
}